<template>
  <div class="lix-mbr">
    <div class="lix-mbr__header">
      <div class="lix-mbr__avatar">
        <open-data type="userAvatarUrl"></open-data>
      </div>
      <div class="lix-mbr__nickname">
        <open-data type="userNickName"></open-data>
      </div>
      <div class="lix-mbr__header--list" v-if="userInfo !== null">
        <div class="lix-mbr__header--cell">
          <p>收藏 {{ userInfo.favorites }}</p>
        </div>
        <div class="lix-mbr__header--cell">
          <p class="lix-mbr__border">足迹 {{ userInfo.footmarks }}</p>
        </div>
        <div class="lix-mbr__header--cell">
          <p>积分 {{ userInfo.credits }}</p>
        </div>
      </div>
    </div>
    <div class="lix-mbr__middle">
      <div class="lix-mbr__middle--list" v-for="(item, idx) in middleItem" :key="idx">
        <image :src="item.src"/>
        <p>{{ item.key }}</p>
      </div>
    </div>
    <div class="lix-mbr__myorder">

    </div>
    <div class="zan-panel">
      <div class="zan-cell zan-cell--access">
        <div class="zan-cell__bd">我的订单</div>
        <div class="zan-cell__ft">全部订单</div>
      </div>
    </div>
    <div class="lix-mbr__order">
      <div class="lix-mbr__order--list" v-for="(item, idx) in orderList" :key="idx" :data-type="item.type" @click="go2OrderPage">
        <image :src="item.src"/>
        <p>{{ item.key }}</p>
      </div>
    </div>
    <div class="lix-mbr__banner">
      <image :src="advert.thumb"/>
    </div>
    <div class="lix-mbr__seperate"></div>
    <div class="lix-mbr__list">
      <div class="cell" v-for="(item, idx) in menus" :key="idx" @click="onClick">
        <div class="left">
          <div class="iconimg">
            <image :src="item.icon"/>
          </div>
          <div>{{ item.label }}</div>
        </div>
        <div class="right">
          <image src="../../static/images/arrow.png"/>
        </div>
      </div>
    </div>
    <div class="lix-mbr__seperate"></div>
    <div class="lix-mbr__list">
      <div class="cell" @click="onClick" data-type="setting">
        <div class="left">
          <div class="iconimg">
            <image src="../static/images/setting.png"/>
          </div>
          <div>设置</div>
        </div>
        <div class="right">
          <image src="../../static/images/arrow.png"/>
        </div>
      </div>
    </div>
    <div class="lix-mbr__seperate"></div>
  </div>
</template>

<script>
import { getMemberInfo } from '../api';
export default {
  data() {
    return {
      advert: {},
      menus: [],
      userInfo: null,
      orderList: [
        {key: '全部订单', src: '../static/images/order.png', type: 'all'},
        {key: '待付款', src: '../static/images/willpay.jpg', type: 'needpay'},
        {key: '待收货', src: '../static/images/willreceive.jpg', type: 'wait'},
        {key: '待评价', src: '../static/images/appraise.jpg', type: 'estimate'}
      ]
    };
  },
  onLoad() {
    getMemberInfo()
      .then(res => {
        console.log(res);
        const data = res.data;
        this.advert = data.advert;
        this.menus = data.menus[0];
        this.userInfo = data.user;
      })
      .catch(e => {
        console.log(e);
      });
  },
  methods: {
    onClick(e) {
      const type = e.mp.currentTarget.dataset.type;
      if (type && type === 'setting') {
        wx.navigateTo({
          url: '/pages/setting'
        });
        return;
      }
      wx.navigateTo({
        url: '/pages/nodata'
      });
    },
    go2OrderPage(e) {
      const type = e.mp.currentTarget.dataset.type;
      wx.navigateTo({
        url: '/pages/orderlist?type=' + type
      });
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/member.scss";
.zan-cell {
    position: relative;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    // line-height: 1.4;
    font-size: 14px;
    // height: 40px;
    border-bottom: 1rpx solid #eeeeee;
}

.zan-cell1 {
    position: relative;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    // line-height: 1.4;
    font-size: 14px;
    height: 40px;
    border-bottom: 1rpx solid #eeeeee;
    image {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      margin-right: 15px;
    }
}

.zan-cell__bd {
  flex: 1;
  font-size: 17px;
  color: #424242;
}

.zan-cell__ft {
  color: #b0b0b0;
  font-size: 14px;
}
</style>
